<template>
	<view class="content">
		<el-button type="primary" class="addBtn" @click="add" icon="el-icon-plus">新增内容</el-button>
		<text>标题：</text>
		<el-input v-model="seranch.title" style="width: 400upx;" placeholder="输入标题全称"></el-input>
		<text style="margin-left: 20upx;">类别：</text>
		<el-select v-model="seranch.subType" style="width: 400upx;" placeholder="选择类别">
			<el-option v-for="item in options" :key="item.name" :label="item.label" :value="item.name">
			</el-option>
		</el-select>
		<el-button @click="seranchChange" icon="el-icon-search">查询</el-button>
		<el-button @click="seranchChangeTwo" icon="el-icon-refresh">重置</el-button>
		<el-table :data="List" stripe style="width: 100%" border v-loading="loading" :height="600">
			<el-table-column prop="title" label="标题" width="180">
			</el-table-column>
			<el-table-column prop="subType" label="类型" width="180">
			</el-table-column>
			<el-table-column prop="desc" label="描述" width="180">
			</el-table-column>
			<el-table-column prop="desc" label="封面图" width="180">
				<template slot-scope="scope">
					<el-image style="max-width:160upx;max-height:160upx" :src="scope.row.img"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="创建时间">
				<template slot-scope="scope">
					{{scope.row.createTime | formatDateTwo}}
				</template>
			</el-table-column>
			<el-table-column label="修改时间">
				<template slot-scope="scope">
					<view v-if="scope.row.updateTime">{{scope.row.updateTime | formatDateTwo}}</view>
					<view v-if="!scope.row.updateTime">暂无修改</view>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="info" @click="particulars(scope.row._id)" plain>详情</el-button>
					<el-button type="success" plain @click="add(scope.row._id,'edit')">修改</el-button>
					<el-button type="danger" @click="remove(scope.row)" plain>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<view class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageIndex" :page-sizes="[4, 8, 16, 30]" :page-size="2"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '../../../until/index.js'
	export default {
		data() {
			return {
				List: [],
				options: [],
				loading: false,
				total: 0,
				pageIndex: 1,
				pageSize: 4,
				seranch: {}
			};
		},
		filters: {
			// 时间格式化
			formatDateTwo(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		created() {
			this.get()
			this.getType()
		},
		methods: {
			async getType() {
				return await uniCloud.callFunction({
					name: 'get',
					data: {
						tableName: 'blogs-type',
						pageIndex: this.pageIndex, //第几页
						pageSize: 20 //每页的记录条数
					}
				}).then(res => {
					this.options = res.result.data
					console.log(res)
					return res.result.data
				})
			},
			seranchChangeTwo() {
				this.seranch = {}
				this.get()
			},
			seranchChange() {
				this.get()
			},
			// 详情
			particulars(Id) {
				uni.navigateTo({
					url: "./details?id=" + Id
				})
			},
			// 分页
			handleCurrentChange(pageIndex) {
				this.pageIndex = pageIndex
				this.get()
			},
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.pageIndex = 1
				this.get()
			},
			// 删除
			remove(content) {
				this.$confirm('是否删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(async () => {
						return await uniCloud.callFunction({
							name: 'remove',
							data: {
								tableName: 'blogs-List',
								id: content._id
							}
						}).then((res) => {
							uni.hideLoading()
							this.$notify({
								title: '提示',
								message: '删除成功',
								type: 'success'
							});
							var arr = content.img
							arr = arr.split(',')
							uniCloud.deleteFile({
								fileList: arr,
								success(res) {
									console.log("删除成功", res)
								},
								fail(res) {
									console.log("删除失败", res)
								}
							})
							this.get()
							return res.result.msg
						}).catch((err) => {
							uni.hideLoading()
							uni.showModal({
								content: `删除失败，错误信息为：${err.message}`,
								showCancel: false
							})
							console.error(err)
						})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
			},
			// 跳转添加
			add(Id, type) {
				uni.navigateTo({
					url: "./add?Id=" + Id + "&type=" + type
				})
			},
			// 获取列表
			async get() {
				this.loading = true
				return await uniCloud.callFunction({
					name: 'get',
					data: {
						tableName: 'blogs-List', //要查询的表名
						filter: {
							title: this.seranch.title,
							subType: this.seranch.subType
						},
						pageIndex: this.pageIndex, //第几页
						pageSize: this.pageSize //每页的记录条数
					}
				}).then((res) => {
					uni.hideLoading()
					this.List = res.result.data
					this.total = res.result.total
					this.loading = false
					return res.result.data
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40upx;

		.addBtn {
			margin: 20upx 0;
			margin-right: 20upx;
		}

		.block {
			float: right;
			margin: 20upx 0;
		}
	}
</style>
